<script setup>
import { SearchOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
import CreateMenu from './components/CreateMenu.vue'
import { menuList,menuDelete} from "@/apis/systemManaging/menu";
import { onMounted, reactive, ref, watch, nextTick, provide } from 'vue';
import { message } from 'ant-design-vue';
import { RightOutlined, DownOutlined,SlackOutlined} from '@ant-design/icons-vue';
const iconEnum={
   
}
const columns = [
    {
        title: '编号',
        dataIndex: 'id',
        align: 'left',
        width: 100,
        fixed: 'left',
    },
    {
        title: '菜单名称',
        dataIndex: 'name',
        width: 100,
        align: 'center',
    },
    {
        title: '图标',
        dataIndex: 'icon',
        width: 100,
        align: 'center',
    },
    {
        title: '排序',
        dataIndex: 'sort',
        width: 100,
        align: 'center',
    },
    {
        title: '路由',
        dataIndex: 'path',
        width: 100,
        align: 'center',
    },
    {
        title: '权限标识',
        dataIndex: 'permission',
        width: 120,
        align: 'center',
    },
    {
        title: '组件路径',
        dataIndex: 'component',
        align: 'center',
    },
    {
        title: '操作',
        dataIndex: 'operate',
        align: 'center',
        width: 140,
        fixed: 'right',
    },
];
const loading = ref(true);
const tableRef = ref(null);
const menuRef = ref(null);
const tableHeight = ref(0);
const dataSource = ref([]);
const formState = reactive({
    name: "",
    path: "",
    parentId: "",
    sort: "",
    type: "",
    component: "",
    permission: "",
    icon: "",
})
onMounted(() => {
    // nextTick(() => {
    //     if (dataSource.value) {
    //         let box = tableRef.value;
    //         let top = box.children[0].getBoundingClientRect().top;
    //         tableHeight.value = window.innerHeight - top - 54 - 64 - 30;
    //     }
    // })
})
onMounted(() => {
    getMenuList();
})
provide("getList", () => getMenuList())
const getMenuList = async () => {
    loading.value = true
    let res = await menuList();
    if (res.code === 200) {
        dataSource.value = res.data
        loading.value = false
    }
}

const handleCreate = () => {
    menuRef.value.open = true
}
const menuEdit = (options) => {
    for (const key in menuRef.value.formState) {
        options[key] && (menuRef.value.formState[key] = options[key])
    };
    menuRef.value.open = true;
}
const handleDelete = async (options) => {
    loading.value = true;
    let res = await menuDelete({ id: options.id });
    if (res.code === 200) {
        getMenuList();
    }
}
const expandIcon = (props) => {
    if (props.record.fileInfoList.length > 0) {
        // if (props.expanded) {//有数据-展开时候图标
        //     return (
        //         <DownOutlined onClick={(e) => { props.onExpand(props.record, e) }} />
        //     );
        // } else {//有数据-未展开时候图标
        //     return (
        //         <RightOutlined onClick={(e) => { props.onExpand(props.record, e) }} />
        //     );
        // }
    } else {//无数据-图标
        return;
    }

}


</script>
<template>
    <div class="menu-container outerlayer-container">
        <div class="search top-search-container">
            <!-- <a-button type="primary" >
                <template #icon>
                    <SearchOutlined />
                </template>
                搜索
            </a-button>&nbsp; -->
            <a-button type="primary" @click="handleCreate">
                <template #icon>
                    <PlusCircleOutlined />
                </template>
                新增菜单
            </a-button>
        </div>
        <div ref="tableRef" class="main-content-container">
            <!-- :expandIcon="expandIcon" -->
            <a-table :loading="loading" :columns="columns" :data-source="dataSource" rowKey="id" :pagination="false"
                :scroll="{ x: 'max-content' }">
                <template #expandIcon="props">
                    <RightOutlined :style="{fontSize:'14px',color:'#999',marginRight:'10px'}" v-if="props.record.children&&!props.expanded" @click="props.onExpand(props.record)"/>
                    <DownOutlined :style="{fontSize:'14px',color:'#999',marginRight:'10px'}" v-if="props.record.children&&props.expanded" @click="props.onExpand(props.record)"/>
                </template>
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'icon'">
                        <div>
                           
                        </div>
                    </template>
                    <template v-if="column.dataIndex === 'operate'">
                        <div>
                            <a-button type="link" size="small" @click="menuEdit(record)">编辑</a-button>
                            <a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>
                        </div>
                    </template>
                </template>
            </a-table>
        </div>
        <create-menu ref="menuRef" :list="dataSource" @getList="getMenuList" />
    </div>
</template>


<style lang='scss' scoped>
.menu-container {

    .search {
        display: flex;
        margin-bottom: 10px;
    }
}
</style>